<template>
  <div>
    <div class="transform">
      <p>颜色转换</p>
      <a-space class="mb-10 mt-10">
        <span> rgb(a)转hex： </span>
        <a-input v-model:value="value1" />
        <a-tag v-if="value1" :color="value1">{{ value1 }}</a-tag>
        <a-button @click="changeRgbaToHex">转换</a-button>
        <a-tag v-if="value2" :color="value2">{{ value2 }}</a-tag>
        <span>{{ value2 }}</span>
      </a-space>
      <a-space>
        <span> hex转rgb： </span>
        <a-input v-model:value="value3" />
        <a-tag v-if="value3" :color="value3">{{ value3 }}</a-tag>
        <a-button @click="changeHexToRgb">转换</a-button>
        <a-tag v-if="value4" :color="value4">{{ value4 }}</a-tag>
        <span>{{ value4 }}</span>
      </a-space>
    </div>
  </div>
</template>

<script setup>
  import { hexToRgb, rgbaToHex } from '@/utils/transformColor.js';
  const value1 = ref();
  const value2 = ref();
  const value3 = ref();
  const value4 = ref();
  const changeRgbaToHex = () => {
    console.log(value1.value);
    value2.value = rgbaToHex(value1.value);
  };
  const changeHexToRgb = () => {
    value4.value = hexToRgb(value3.value);
  };
</script>

<style lang="less" scoped>
.transform{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>
